<template>
	<view class="expense-container">
		<!-- 顶部标签页 -->
		<u-tabs :list="tabList" :current="currentTab" @change="changeTab" :is-scroll="false" active-color="#2979ff"></u-tabs>
		
		<!-- 顶部信息展示 -->
		<view class="expense-header">
			<view class="header-title">
				<text>经营支出</text>
				<text class="amount">{{ totalAmount.toFixed(2) }}</text>
			</view>
		</view>
		
		<!-- 支出类型选择 -->
		<view class="expense-types">
			<!-- 第一行 -->
			<view class="type-row">
				<view 
					class="type-item" 
					:class="{'active': selectedType === 'business'}"
					@click="selectType('business')"
				>
					<view class="icon-wrapper blue">
						<u-icon name="home" size="24" color="#fff"></u-icon>
					</view>
					<text>经营支出</text>
				</view>
				
				<view 
					class="type-item" 
					:class="{'active': selectedType === 'purchase'}"
					@click="selectType('purchase')"
				>
					<view class="icon-wrapper red">
						<u-icon name="shopping-cart" size="24" color="#fff"></u-icon>
					</view>
					<text>采购支出</text>
				</view>
				
				<view 
					class="type-item" 
					:class="{'active': selectedType === 'tax'}"
					@click="selectType('tax')"
				>
					<view class="icon-wrapper orange">
						<u-icon name="file-text" size="24" color="#fff"></u-icon>
					</view>
					<text>税费支出</text>
				</view>
			</view>
			
			<!-- 第二行 -->
			<view class="type-row">
				<view 
					class="type-item" 
					:class="{'active': selectedType === 'rent'}"
					@click="selectType('rent')"
				>
					<view class="icon-wrapper yellow">
						<u-icon name="home-fill" size="24" color="#fff"></u-icon>
					</view>
					<text>房租水电</text>
				</view>
				
				<view 
					class="type-item" 
					:class="{'active': selectedType === 'salary'}"
					@click="selectType('salary')"
				>
					<view class="icon-wrapper green">
						<u-icon name="account" size="24" color="#fff"></u-icon>
					</view>
					<text>工资支出</text>
				</view>
				
				<view 
					class="type-item" 
					:class="{'active': selectedType === 'other'}"
					@click="selectType('other')"
				>
					<view class="icon-wrapper purple">
						<u-icon name="plus" size="24" color="#fff"></u-icon>
					</view>
					<text>其它</text>
				</view>
			</view>
		</view>
		
		<!-- 供应商/支付单位选择 -->
		<view class="form-section">
			<u-cell-group :border="false">
				<u-cell title="往来单位" :value="selectedUnit || '请选择'" isLink @click="selectUnit">
					<u-icon slot="icon" name="account" size="20" customStyle="margin-right: 10rpx;"></u-icon>
				</u-cell>
				
				<u-cell title="支付账户" :value="selectedAccount || '现金'" isLink @click="selectAccount">
					<u-icon slot="icon" name="rmb" size="20" customStyle="margin-right: 10rpx;"></u-icon>
				</u-cell>
			</u-cell-group>
		</view>
		
		<!-- 备注区域 -->
		<view class="remark-section">
			<view class="remark-title">备注（最多输入200个字）</view>
			<textarea 
				class="remark-textarea" 
				placeholder="请输入备注内容" 
				maxlength="200"
				v-model="remark"
			></textarea>
			<view class="date-display">{{ currentDate }}</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="footer-actions">
			<view class="btn-again" hover-class="btn-again-hover" @click="recordAgain">再记一笔</view>
			<view class="btn-save" hover-class="btn-save-hover" @click="saveRecord">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [
                    { name: '销售' },
                    { name: '进货' },
                    { name: '其他收入' },
                    { name: '其他支出' }
                ],
				currentTab: 3, // 默认选中'其他支出'
				totalAmount: 0.00,
				selectedType: 'business', // 默认选中经营支出
				selectedUnit: '',
				selectedAccount: '现金',
				remark: '',
				currentDate: this.formatDate(new Date())
			};
		},
		methods: {
			changeTab(e) {
				// 识别参数类型并提取索引
				let index;
				if (typeof e === 'object') {
					// 如果是对象参数（可能是u-tabs传入的完整项）
					if (e.index !== undefined) {
						index = e.index; // 使用对象的index属性
					} else if (e.name !== undefined) {
						// 如果没有index但有name，尝试在tabList中查找匹配的项
						index = this.tabList.findIndex(item => item.name === e.name);
					} else {
						console.log('无法识别的参数格式:', e);
						return;
					}
				} else {
					// 如果是数字索引
					index = e;
				}
				
				// 忽略相同标签的点击
				if (this.currentTab === index) return;
				
				// 添加安全检查，确保index有效且对应的tab项存在
				if (index < 0 || index >= this.tabList.length || !this.tabList[index]) {
					console.log('无效的标签索引:', index);
					return;
				}
				
				const tabName = this.tabList[index].name;
				
				if (tabName === '销售') {
					// 添加加载提示并跳转到销售页面
					uni.showLoading({
						title: '正在跳转...',
						mask: true
					});
					
					// 添加延迟以显示加载状态
					setTimeout(() => {
						uni.redirectTo({ 
							url: '/pages/sales/index',
							success: () => {
								uni.hideLoading();
								console.log('成功跳转到销售页面');
							},
							fail: (err) => {
								uni.hideLoading();
								uni.showToast({
									title: '跳转失败',
									icon: 'none',
									duration: 2000
								});
								console.error('跳转失败:', err);
							}
						});
					}, 300);
				} else if (tabName === '进货') {
					// 添加加载提示并跳转到进货页面
					uni.showLoading({
						title: '正在跳转...',
						mask: true
					});
					
					// 添加延迟以显示加载状态
					setTimeout(() => {
						uni.redirectTo({ 
							url: '/pages/purchase/purchase',
							success: () => {
								uni.hideLoading();
								console.log('成功跳转到进货页面');
							},
							fail: (err) => {
								uni.hideLoading();
								uni.showToast({
									title: '跳转失败',
									icon: 'none',
									duration: 2000
								});
								console.error('跳转失败:', err);
							}
						});
					}, 300);
				} else if (tabName === '其他收入') {
					// 添加加载提示并跳转到其他收入页面
					uni.showLoading({
						title: '正在跳转...',
						mask: true
					});
					
					// 添加延迟以显示加载状态
					setTimeout(() => {
						uni.redirectTo({ 
							url: '/pages/income/index',
							success: () => {
								uni.hideLoading();
								console.log('成功跳转到其他收入页面');
							},
							fail: (err) => {
								uni.hideLoading();
								uni.showToast({
									title: '跳转失败',
									icon: 'none',
									duration: 2000
								});
								console.error('跳转失败:', err);
							}
						});
					}, 300);
				} else if (tabName === '其他支出') {
					this.currentTab = index;
				}
			},
			
			// 选择支出类型
			selectType(type) {
				this.selectedType = type;
				// 显示提示
				uni.showToast({
					title: `已选择${this.getTypeLabel(type)}`,
					icon: 'none',
					duration: 1000
				});
			},
			
			// 获取类型的显示文本
			getTypeLabel(type) {
				const types = {
					'business': '经营支出',
					'purchase': '采购支出',
					'tax': '税费支出',
					'rent': '房租水电',
					'salary': '工资支出',
					'other': '其它'
				};
				return types[type] || '未知类型';
			},
			
			// 选择往来单位
			selectUnit() {
				uni.showLoading({
					title: '加载单位列表...',
					mask: true
				});
				
				setTimeout(() => {
					uni.hideLoading();
					
					// 弹出选择单位的模态框
					uni.showActionSheet({
						itemList: ['供应商', '企业合作方', '服务提供商', '其他单位', '新增单位'],
						success: (res) => {
							const units = ['供应商', '企业合作方', '服务提供商', '其他单位', '新增单位'];
							if (res.tapIndex === 4) {
								// 新增单位选项
								uni.showToast({
									title: '前往新增单位',
									icon: 'none',
									duration: 1500
								});
								// 这里可以添加跳转到新增单位页面的逻辑
							} else {
								this.selectedUnit = units[res.tapIndex];
								uni.showToast({
									title: `已选择: ${this.selectedUnit}`,
									icon: 'none',
									duration: 1500
								});
							}
						}
					});
				}, 300);
			},
			
			// 选择支付账户
			selectAccount() {
				uni.showActionSheet({
					itemList: ['现金', '微信', '支付宝', '银行卡', '其他账户'],
					success: (res) => {
						const accounts = ['现金', '微信', '支付宝', '银行卡', '其他账户'];
						this.selectedAccount = accounts[res.tapIndex];
						uni.showToast({
							title: `已选择: ${this.selectedAccount}`,
							icon: 'none',
							duration: 1500
						});
					}
				});
			},
			
			// 格式化日期
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			
			// 再记一笔
			recordAgain() {
				// 清空表单内容但保留类型
				this.selectedUnit = '';
				this.remark = '';
				uni.showToast({
					title: '已清空表单',
					icon: 'none',
					duration: 1500
				});
			},
			
			// 保存记录
			saveRecord() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				});
				
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '保存成功',
						icon: 'success',
						duration: 1500
					});
					
					// 清空表单
					this.selectedUnit = '';
					this.remark = '';
				}, 1000);
			}
		}
	};
</script>

<style lang="scss" scoped>
page {
    background-color: #f5f7fa;
}

.expense-container {
    min-height: 100vh;
    padding-top: 40rpx; /* 增加顶部padding防止内容被状态栏遮挡 */
    padding-bottom: 120rpx;
    position: relative;
    background-color: #f5f7fa;
}

// 顶部标签样式继承其他页面样式
/deep/ .u-tabs {
    background-color: #fff !important;
}
/deep/ .u-tabs__wrapper__nav__line {
    display: none !important;
}
/deep/ .u-tabs__wrapper__nav__item {
    padding: 0 40rpx !important;
    height: 80rpx !important;
    line-height: 80rpx !important;
    font-size: 28rpx !important;
}
/deep/ .u-tabs__wrapper__nav__item.is-active {
    font-weight: bold;
    color: #2979ff !important;
    position: relative;
    background-color: rgba(41, 121, 255, 0.08);
}
/deep/ .u-tabs__wrapper__nav__item.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 4rpx;
    background-color: #2979ff;
}

// 顶部信息展示区域
.expense-header {
    background-color: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .header-title {
        text-align: center;
        font-size: 28rpx;
        color: #666;
        line-height: 1.5;
        
        .amount {
            display: block;
            font-size: 40rpx;
            font-weight: 500;
            color: #ff5252;
        }
    }
}

// 支出类型选择区域
.expense-types {
    background-color: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .type-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30rpx;
        
        &:last-child {
            margin-bottom: 0;
        }
    }
    
    .type-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 30%;
        
        .icon-wrapper {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10rpx;
            
            &.blue {
                background-color: #2979ff;
            }
            
            &.red {
                background-color: #ff5252;
            }
            
            &.orange {
                background-color: #ff9800;
            }
            
            &.yellow {
                background-color: #ffb300;
            }
            
            &.green {
                background-color: #4caf50;
            }
            
            &.purple {
                background-color: #9c27b0;
            }
        }
        
        text {
            font-size: 24rpx;
            color: #666;
        }
        
        &.active {
            text {
                color: #2979ff;
                font-weight: bold;
            }
        }
    }
}

// 表单区域
.form-section {
    background-color: #fff;
    margin-bottom: 20rpx;
    
    /deep/ .u-cell {
        padding: 22rpx 30rpx !important;
        align-items: center;
    }
    /deep/ .u-cell__body {
        font-size: 28rpx !important;
        color: #333 !important;
    }
    /deep/ .u-cell__left-icon-wrap {
        margin-right: 12rpx !important;
    }
    /deep/ .u-icon__icon {
        color: #8c8c8c !important;
        font-size: 36rpx !important;
    }
    /deep/ .u-cell__value {
        font-size: 28rpx !important;
        color: #595959 !important;
        text-align: right;
    }
    /deep/ .u-cell__right-icon-wrap {
        margin-left: 8rpx !important;
        color: #bfbfbf !important;
    }
    /deep/ .u-line {
        border-bottom: 1rpx solid #f0f0f0 !important;
    }
}

// 备注区域
.remark-section {
    background-color: #fff;
    padding: 30rpx;
    position: relative;
    
    .remark-title {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
    }
    
    .remark-textarea {
        width: 100%;
        height: 200rpx;
        background-color: #f8f9fa;
        border-radius: 8rpx;
        padding: 20rpx;
        font-size: 28rpx;
        color: #333;
    }
    
    .date-display {
        text-align: right;
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
    }
}

// 底部按钮
.footer-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 100rpx;
    
    .btn-again {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        color: #2979ff;
        font-size: 30rpx;
        border-top: 1rpx solid #eee;
        
        &-hover {
            background-color: #f5f5f5;
        }
    }
    
    .btn-save {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2979ff;
        color: #fff;
        font-size: 30rpx;
        
        &-hover {
            background-color: #1c6cef;
            opacity: 0.9;
        }
    }
}
</style> 